<template>
  <div>
    <el-dialog title="修改菜单" destroy-on-close v-model="visable" width="55%" :close-on-click-modal="false" draggable style="max-width: 600px;">
      <div style="width: 85%;margin: auto;text-align: left;">
        <el-form ref="menuRef" :model="menuFormData" :rules="dialogFormRules" label-width="120px" size="small" :disabled="dialogIsLook">
          <el-form-item label="菜单类型:" prop="rightsType">
            <el-select v-model="menuFormData.rightsType" placeholder="请选择菜单类型" collapse-tags clearable @change="rightsTypeChange">
              <el-option label="目录" :value="0" />
              <el-option label="菜单" :value="1" />
              <el-option label="按钮" :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="菜单名称:" prop="rightsName">
            <el-input v-model="menuFormData.rightsName" placeholder="请输入菜单名称" clearable />
          </el-form-item>
          <el-form-item label="上级菜单:" prop="parentRightsName">
            <el-select ref="parentRightsSelectRef" v-model="menuFormData.parentRightsName" placeholder="请选择父级菜单" clearable @clear="parentRightsClear">
              <el-option style="height:200px;overflow: auto;background:#fff;" value="-1">
                <el-tree
                  ref="treeRef"
                  v-model="menuFormData.parentRightsId"
                  :check-strictly="true"
                  :data="treeData"
                  node-key="rightsId"
                  :render-after-expand="false"
                  style="width: 240px"
                  :props="defaultProps"
                  accordion
                  @node-click="getCurrentNode"
                />
              </el-option>
            </el-select>

          </el-form-item>
          <el-form-item label="菜单编号:" prop="rightsCode">
            <el-input v-model="menuFormData.rightsCode" placeholder="请输入菜单编号" clearable />
          </el-form-item>
          <el-form-item label="菜单路径:" prop="path">
            <el-input v-model="menuFormData.path" placeholder="请输入菜单路径" :disabled="this.menuFormData.rightsType==2" clearable />
          </el-form-item>
          <!-- <el-form-item label="菜单图标:" prop="icon">
            <el-input v-model="menuFormData.icon" placeholder="请输入菜单图标" clearable />
          </el-form-item> -->
          <el-form-item label="序号:" prop="sort">
            <el-input v-model="menuFormData.sort" type="number" :min="0" clearable />
          </el-form-item>
          <el-form-item label="是否隐藏:" prop="isHidden">
            <el-radio-group v-model="menuFormData.isHidden">
              <el-radio :label="1">隐藏</el-radio>
              <el-radio :label="0">显示</el-radio>
            </el-radio-group>
          </el-form-item>

        </el-form>
      </div>
       <template #footer>
         <div class="bs-dialog-footer" style="text-align: center;">
           <el-button size="small" @click="visable = false">取消</el-button>
           <el-button size="small" type="primary" @click="save">保存</el-button>
         </div>
       </template>
    </el-dialog>
  </div>
</template>

<script>
import { getParentRightsList, updateRights, getRightsById } from '@/api/system/menu'

export default {
  components: {
  },
  data() {
    return {
      // 弹窗开关
      visable: false,
      dialogIsLook: false,
      defaultProps: {
        children: 'children',
        label: 'rightsName',
        value: 'rightsId'
      },
      treeData: [], // 父级菜单
      menuFormData: {
        rightsId: '',
        rightsType: '',
        rightsName: '',
        parentRightsId: '',
        parentRightsName: '',
        rightsCode: '',
        isHidden: 0,
        path: '',
        sort: 0
      },
      dialogFormRules: {
        rightsType: [{ required: true, message: '请选择菜单类型', trigger: ['blur', 'change'] }],
        rightsName: [
          { required: true, message: '请输入菜单名称', trigger: ['blur', 'change'] },
          { min: 2, max: 30, message: '菜单名称在2~30字符之间', trigger: ['blur', 'change'] }
        ],
        rightsCode: [
          { required: true, message: '请输入菜单编号', trigger: ['blur', 'change'] },
          { min: 2, max: 30, message: '菜单编号在2~30字符之间', trigger: ['blur', 'change'] }
        ],
        path: [
          { required: true, message: '请输入菜单路径', trigger: ['blur', 'change'] },
          { min: 4, max: 30, message: '菜单路径在4~30字符之间', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  created() {
  },
  methods: {
    // 菜单类型变更事件
    rightsTypeChange(val){
      // 菜单类型=按钮
      if (val==2) {
        this.menuFormData.path = 'Layout'
      } else if (this.menuFormData.path == 'Layout'){
        //如果从按钮切换到其他类型, 也要清空, 否则不清空
        this.menuFormData.path = ''
      }
    },
    // 父节点清空事件
    parentRightsClear() {
      this.menuFormData.parentRightsId = ''
      this.menuFormData.parentRightsName = ''
    },
    // 选中父节点事件
    getCurrentNode(selectTreeNode) {
      this.menuFormData.parentRightsId = selectTreeNode.rightsId
      this.menuFormData.parentRightsName = selectTreeNode.rightsName
      this.$refs.parentRightsSelectRef.blur()
    },
    // 打开弹框
    openModal(rightsId) {
      this.visable = true
      // 获取修改的菜单信息
      getRightsById({ 'rightsId': rightsId }).then(res => {
        if (res.code === 1) {
          this.menuFormData = { ...res.data }
          this.menuFormData.parentRightsName = res.data.parentRightsName
          //this.rightsTypeChange(res.data.rightsType)
        }
      })
      // 获取父节点
      getParentRightsList().then(res => {
        if (res.code === 1) {
          this.treeData = res.data
        }
      })
    },
    save() {
      updateRights(this.menuFormData).then(res => {
        if (res.code === 1) {
          this.visable = false
          this.$message.success('操作成功')
          this.$emit('flushTable', {})
        }
      })
    }
  }

}
</script>

<style scoped>
 :deep(.el-form-item__content) {
    display: inline-block;
    text-align: left;
    padding-right: 10%;
  }
  /deep/.el-drawer__title {
    text-align: left;
  }
  :deep(.el-input),
  :deep(.el-input-number--small) {
    width: 100%;
  }
  :deep(.el-dialog__header) {
    margin-bottom: 10px;
  }
</style>
